<div id="viewsWrapper">
    <div id="view1" class="pt-page">
        <div class="container-fluid container-step2" id="step2-base">
            <div class="layout-left">
                <header class="step2-title">{{i18n-creativeMaker}}</header>
                <article style="margin-top: 30px;">
                    <div>
                        <label class="step2-label">{{i18n-majorCreativeElements}}</label>
                        <div class="step2-input">
                            <div class="input-group">
                                <input type="text" class="form-control" id="majorElement" type-a="1" placeholder="{{i18n-pleaseSelect}}" disabled="disabled">
                        <span class="input-group-btn">
                            <button class="btn btn-default btn-choose" data-who="1" type="button">{{i18n-pleaseSelect}}</button>
                        </span>
                                <input type="text" class="form-control" style="display:none;width:80px;" id="majorFill" placeholder="{{i18n-pleaseEnterAFillValue}}" />
                            </div>
                        </div>
                    </div>
                    <div class="step2-swich-warpper">
                        <div class="step2-swich-line"></div>
                        <div class="step2-swich-btn-div" data-swap="1">
                            <i class="fa fa-exchange" aria-hidden="true"></i>
                        </div>
                    </div>
                    <div>
                        <label class="step2-label">{{i18n-secondaryCreativeElements}}</label>
                        <div class="step2-input">
                            <div class="input-group">
                                <input type="text" class="form-control" id="minorElement" type-a="-1" placeholder="{{i18n-pleaseSelect}}" disabled="disabled">
                        <span class="input-group-btn">
                            <button class="btn btn-default btn-choose" data-who="-1"  type="button">{{i18n-pleaseSelect}}</button>
                        </span>
                                <input type="text" class="form-control" style="display:none;width:80px;" id="minorFill" placeholder="{{i18n-pleaseEnterAFillValue}}" />
                            </div>
                        </div>
                    </div>
                    <div>
                        <button class="btn btn-default btn-generte">{{i18n-generateIdeas}}</button>
                    </div>
                </article>
            </div>
            <div class="layout-right">
                <header class="step2-layout-right-title">{{i18n-creativePreview}}</header>
                <div class="container-fluid preview-container">
                    <ul id="previewContainer"></ul>
                </div>
                <footer class="layout-right-footer">
                    <div class="high-edit hidden"><i class="font-icon font-icon-magic" style="font-size:16px;"></i><span class="high-edit-font">{{i18n-highEdit}}</span></div>
                    <button class="btn btn-primary btn-sm pull-right btn-next">{{i18n-next}}&nbsp;→ </button>
                </footer>
            </div>
        </div>
    </div>
    <div id="view2" class="pt-page">
        <!--------------高级编辑------------------>
        <div class="container-fluid container-step2" id="step2-high">
            <div class="layout-left high-layout-left">
                <header class="step2-title">{{i18n-advancedEdit}}</header>

                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default focus btn-step2-high" data-which="1">{{i18n-style}}</button>
                    <button type="button" class="btn btn-default btn-step2-high" data-which="2">{{i18n-color}}</button>
                </div>
                <article class="margin-top20">
                    <div>
                        <div id="bg-div">
                            <div class="element-group-style"></div>
                            <div class="element-img-container margin-top20">
                                <div class="high-rond" data-color="xffffff">
                                    <div class="high-load xffffff"></div>
                                </div>
                                <div class="high-rond" data-color="xae895f">
                                    <div class="high-load xae895f"></div>
                                </div>
                                <div class="high-rond" data-color="xdc0a42">
                                    <div class="high-load xdc0a42"></div>
                                </div>
                                <div class="high-rond" data-color="x000000">
                                    <div class="high-load x000000"></div>
                                </div>
                                <div class="high-rond" data-color="x999999">
                                    <div class="high-load x999999"></div>
                                </div>
                                <div class="color-box" bg="bg" style="margin-top:8px;"></div>
                                <div class="col-xs-3 high-color-val" style="margin-right:0px;margin-top:8px;">
                                    <input type="text" class="form-control">
                                    <span class="color-unit-position">#</span>
                                </div>
                            </div>
                        </div>
                        <div class="margin-top20">
                            <div class="element-group-style">{{i18n-creativeEle}}</div>
                            <div id="high-ele-style">
                                <div class="element-img-container main-ele-container">
                                    <ul>
                                    </ul>
                                </div>
                                <div class="element-img-container second-ele-container">
                                    <ul>
                                    </ul>
                                </div>
                            </div>
                            <div id="high-ele-color" class="hidden">
                                <div class="element-img-container main-ele-container">
                                    <ul>
                                    </ul>
                                </div>
                                <div class="element-img-container second-ele-container">
                                    <ul>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="element-style-related">
                            <input type="checkbox"  id="ele-associate" class="form-input" checked>
                            <label for="ele-associate">
                                <span class="checkbox-mark"></span><span class="checkbox-mark-word">{{i18n-eleAssociate1}}</span>
                            </label>
                        </div>
                        <div class="margin-top30" id="element-bg">
                            <div class="element-group-style">{{i18n-elementBg}}</div>
                            <div class="row margin-top20" style="margin-left:0px;">
                                <div class="high-ele-val">{{i18n-main}}：</div>
                                <div class="color-box colpick-not"></div>
                                <div class="col-xs-3 high-color-val">

                                    <input type="text" class="form-control" disabled="disabled">
                                    <span class="color-unit-position">#</span>
                                </div>
                                <div class="high-ele-val">{{i18n-join}}：</div>
                                <div class="color-box colpick-not"></div>
                                <div class="col-xs-3 high-color-val">

                                    <input type="text" class="form-control" disabled="disabled">
                                    <span class="color-unit-position">#</span>
                                </div>
                            </div>
                        </div>
                        <div class="margin-top30" id="element-font">
                            <div class="element-group-style">{{i18n-font}}</div>
                            <div class="row margin-top20" style="margin-left:0px;">
                                <div class="high-ele-val">{{i18n-main}}：</div>
                                <div class="color-box colpick-not"></div>
                                <div class="col-xs-3 high-color-val">

                                    <input type="text" class="form-control" disabled="disabled">
                                    <span class="color-unit-position">#</span>
                                </div>
                                <div class="high-ele-val">{{i18n-join}}：</div>
                                <div class="color-box colpick-not"></div>
                                <div class="col-xs-3 high-color-val">

                                    <input type="text" class="form-control" disabled="disabled">
                                    <span class="color-unit-position">#</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="margin-top20">
                        <button class="btn btn-default btn-high-generte" type="submit">{{i18n-generateIdeas}}</button>
                    </div>
                </article>
                <div class="high-edit-reset"><span class="font-icon font-icon-recycle"></span>{{i18n-reset}}</div>
            </div>
            <div class="layout-right high-layout-right">
                <header class="step2-layout-right-title">{{i18n-creativePreview}} <button class="close high-close1" aria-label="Close" type="button">
                    <img src="./imgs/close.png" />
                </button></header>
                <div class="container-fluid high-right-container" style="height:680px;">
                </div>
                <footer class="layout-right-footer">
                    <button class="btn btn-primary btn-sm pull-right high-btn-next">{{i18n-next}}&nbsp;→ </button>
                </footer>
            </div>
        </div>
    </div>

</div>





